<!--
* @Description: 拉卡拉支付商户配置 - 表单
* @Author: DHL
* @Date: 2022-03-30 13:50:53
 * @LastEditors: DHL
 * @LastEditTime: 2023-12-27 08:54:17
-->
<template>
  <tw-drawer
    v-model="visible"
    title="拉卡拉支付商户配置"
    :loading="loading"
    size="50%"
    @close="handleClose"
  >
    <div class="form-wrapper">
      <el-form ref="dbFormRef" :model="dbForm" :rules="rules" label-width="120px">
        <el-form-item label="内部商户号" prop="merInnerNo">
          <el-input v-model="dbForm.merInnerNo" clearable placeholder="请输入内部商户号"></el-input>
        </el-form-item>

        <el-form-item label="银联商户号" prop="merchantNo">
          <el-input v-model="dbForm.merchantNo" clearable placeholder="请输入银联商户号"></el-input>
        </el-form-item>

        <el-form-item label="商户名称" prop="merchantName">
          <el-input v-model="dbForm.merchantName" clearable placeholder="请输入商户名称"></el-input>
        </el-form-item>

        <el-form-item label="经营名称" prop="entName">
          <el-input v-model="dbForm.entName" clearable placeholder="请输入经营名称"></el-input>
        </el-form-item>

        <el-form-item label="机构号" prop="orgCode">
          <el-input v-model="dbForm.orgCode" clearable placeholder="请输入机构号"></el-input>
        </el-form-item>

        <el-form-item label="收银台扫码终端号" prop="cashTermNo">
          <el-input
            v-model="dbForm.cashTermNo"
            clearable
            placeholder="请输入收银台扫码终端号"
          ></el-input>
        </el-form-item>

        <el-form-item label="专业化扫码终端号" prop="proTermNo">
          <el-input
            v-model="dbForm.proTermNo"
            clearable
            placeholder="请输入专业化扫码终端号"
          ></el-input>
        </el-form-item>

        <el-form-item label="结果通知URL" prop="notifyUrl">
          <el-input v-model="dbForm.notifyUrl" clearable placeholder="请输入结果通知URL"></el-input>
        </el-form-item>

        <el-form-item label="网页跳转URL" prop="callbackUrl">
          <el-input
            v-model="dbForm.callbackUrl"
            clearable
            placeholder="请输入网页跳转URL"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <el-button @click="handleClose()">取 消</el-button>
      <el-button type="primary" @click="handleSubmit()"> 提 交 </el-button>
    </template>
  </tw-drawer>
</template>

<script lang="ts" setup>
  import { ElMessage } from 'element-plus'
  import { assign, cloneDeep } from 'lodash-es'
  import { TenantConfigModel } from '@/api/system/model/tenantConfigModel'
  import {
    apiTenantConfigGetByType,
    apiTenantConfigSave,
    apiTenantConfigUpdateById
  } from '@/api/system/tenantConfig'
  import { isEmpty, isNotEmpty } from '@/utils/isUtils'
  import { log } from '../../../utils/logUtils'

  const loading = ref(true)

  /**
   * 显示弹框
   */
  const visible = ref(false)

  const dbFormRef = ref()

  //////////////////////////////////////////////////
  // 表单
  //////////////////////////////////////////////////

  const defaultForm = {
    merInnerNo: '', // 拉卡拉内部商户号
    merchantNo: '', // 拉卡拉银联商户号
    merchantName: '', // 商户名称
    entName: '', // 经营名称
    orgCode: '', // 机构号
    cashTermNo: '', // 收银台扫码终端号
    proTermNo: '', // 专业化扫码终端号
    notifyUrl: '', // 订单支付成功后商户接收订单通知的地址
    callbackUrl: '' // 客户端下单完成支付后返回的商户网页跳转地址
  }

  let dbForm = reactive(cloneDeep(defaultForm))

  /**
   * 查询的配置信息
   */
  let configForm: TenantConfigModel = {}

  //////////////////////////////////////////////////
  // 表单验证规则
  //////////////////////////////////////////////////

  /**
   * 表单验证规则
   */
  const rules = reactive({
    merInnerNo: [
      {
        required: true,
        message: '请输入内部商户号',
        trigger: 'blur'
      }
    ],
    merchantNo: [
      {
        required: true,
        message: '请输入银联商户号',
        trigger: 'blur'
      }
    ],
    merchantName: [
      {
        required: true,
        message: '请输入商户名称',
        trigger: 'blur'
      }
    ],
    entName: [
      {
        required: true,
        message: '请输入经营名称',
        trigger: 'blur'
      }
    ],
    orgCode: [
      {
        required: true,
        message: '请输入机构号',
        trigger: 'blur'
      }
    ],
    cashTermNo: [
      {
        required: true,
        message: '请输入收银台扫码终端号',
        trigger: 'blur'
      }
    ],
    proTermNo: [
      {
        required: true,
        message: '请输入专业化扫码终端号',
        trigger: 'blur'
      }
    ],
    notifyUrl: [
      {
        required: true,
        message: '请输入结果通知URL',
        trigger: 'blur'
      }
    ],
    callbackUrl: [
      {
        required: true,
        message: '请输入网页跳转URL',
        trigger: 'blur'
      }
    ]
  })

  //////////////////////////////////////////////////
  // 函数
  //////////////////////////////////////////////////

  /**
   * 打开弹框
   */
  function handleOpen() {
    visible.value = true
    handleSearch()
  }

  /**
   * 关闭弹框
   */
  function handleClose() {
    dbForm = reactive(cloneDeep(defaultForm))
    visible.value = false
  }

  /**
   * 查询配置信息
   */
  function handleSearch() {
    loading.value = true
    apiTenantConfigGetByType('PAY_LAKALA')
      .then((result) => {
        if (result?.success) {
          configForm = result.data
          if (isNotEmpty(configForm.configJson)) {
            assign(dbForm, { remark: configForm.remark }, JSON.parse(configForm.configJson || ''))
          }
        }
      })
      .finally(() => {
        loading.value = false
      })
  }

  /**
   * 提交表单
   */
  function handleSubmit() {
    const config: any = cloneDeep(dbForm)

    const submitParams = {
      id: configForm.id,
      unionId: dbForm.merchantNo,
      configType: 'PAY_LAKALA',
      name: '拉卡拉支付商户配置',
      configJson: JSON.stringify(config)
    }

    dbFormRef.value.validate((valid: boolean) => {
      if (valid) {
        if (isEmpty(configForm.id)) {
          addFun(submitParams)
        } else {
          editFun(submitParams)
        }
      } else {
        log.warn('拉卡拉支付商户配置', '表单校验失败')
      }
    })
  }

  /**
   * 新增
   * @param isContinue 是否新增并继续
   */
  function addFun(submitParams) {
    loading.value = true
    apiTenantConfigSave(submitParams)
      .then((result) => {
        if (result?.success) {
          ElMessage.success(result.message)
          handleClose()
        } else {
          ElMessage.error(result?.message)
        }
      })
      .catch(() => {})
      .finally(() => {
        loading.value = false
      })
  }

  /**
   * 编辑
   * @returns
   */
  function editFun(submitParams) {
    loading.value = true
    apiTenantConfigUpdateById(submitParams)
      .then((result) => {
        if (result?.success) {
          ElMessage.success(result.message)
          handleClose()
        } else {
          ElMessage.error(result?.message)
        }
      })
      .catch(() => {})
      .finally(() => {
        loading.value = false
      })
  }

  //////////////////////////////////////////////////
  // 暴露出去，父组件才可以调用到
  //////////////////////////////////////////////////
  defineExpose({
    handleOpen
  })
</script>

<style scoped lang="scss">
  .form-wrapper {
    padding: 10px;
  }
</style>
